import { Component, OnInit, ElementRef } from '@angular/core';
import { InterfaceService } from 'src/app/services/interface.service';
import {
  trigger,
  style,
  animate,
  transition
} from "@angular/animations";
@Component({
  selector: 'app-emp-edit',
  templateUrl: './emp-edit.component.html',
  styleUrls: ['./emp-edit.component.css'],
  animations: [
    trigger("myInsertRemoveTrigger", [
      transition(":enter", [
        style({
          opacity: 0,
          height: 0

        }),
        animate("0.5s",
          style({
            opacity: 1,
            height: "500px"
          }))
      ]),
      transition(":leave", [
        style({
          opacity: 1,

        }),
        animate("0.5s",
          style({
            opacity: 0,
            height: 0
          }))])
    ])
  ]
})
export class EmpEditComponent implements OnInit {

  constructor(public elementRef: ElementRef, private ds: InterfaceService) { }

  ngOnInit() {
  }
  val: any;
  pos: any;
  idx: any;
  data: any = {

  };
  submit: any = {
    depart: 'D001',
    role: 'P001'
  };
  change: boolean = false;//打开关闭状态
  index: number = 0;//当前图标位置
  container: any = null;//获取组件元素
  state: number = 0;//0为关闭 1为打开 2为缩小
  width: number = 700;//组件的宽度
  height: number = 500;//组件的高度
  hide: boolean = false;//组件放大缩小状态
  left: string = "50%";
  top: string = "50%";
  close() {
    this.change = false;
    this.hide = false;
    this.state = 0;
  }

  toSmall() {
    this.container = this.elementRef.nativeElement.querySelector('#container');
    this.small();
  }

  show(id) {
    if (this.state == 0) {

      this.change = true;
      this.hide = true;
      this.state = 1;

    } else if (this.state == 2) {
      this.hide = true;
      this.state = 1;
      setTimeout(() => {
        if (this.top == "50%") {
          this.container.style.transform = "translate(-50%,-50%)";
        }
        this.container.style.top = this.top;
        this.container.style.left = this.left;
        this.container.style.width = this.width + "px";
        this.container.style.height = this.height + "px";

      }, 100);
    }
    setTimeout(() => {
      this.drop();
    }, 200);

    this.ds.getPersonalInfo(id).subscribe((res: any) => {
      console.log(res.data);
      if (res.code == 100) {
        this.data = res.data;
        this.submit.depart = res.data.dept.code;
        this.submit.role = res.data.position.code;
      }
    });

    this.ds.getAllDept().subscribe((res: any) => {
      console.log(res);
      if (res.code == 100) {
        this.val = res.data;

      }
    });

    this.ds.getAllPosition().subscribe((res: any) => {
      console.log(res);
      if (res.code == 100) {
        this.pos = res.data;
      }
    });

    this.idx = id;

  }

  small() {
    this.state = 2;
    this.container.style.transition = "all 1s";
    this.container.style.width = 0;
    this.container.style.height = 0;
    this.container.style.transform = "translate(0,0)";
    this.container.style.top = document.body.clientHeight - 46 + "px";
    this.container.style.left = 72 + 42 * (1 + this.index) - 30 + "px";
    setTimeout(() => {
      this.hide = false;
    }, 1000);
  }

  drop() {

    this.container = this.elementRef.nativeElement.querySelector("#container");

    let self = this;

    this.container.addEventListener("dragstart", function (ev) {
      self.container.style.transition = "all 0s";
      self.container.style.transform = "translate(0,0)";
      if (!self.container.style.left) {
        let height = document.body.clientHeight / 2;
        let width = document.body.clientWidth / 2;
        self.container.style.left = width - 350 + "px";
        self.container.style.top = height - 250 - 50 + "px";
      }
      this.left = self.container.style.left.substring(
        0,
        self.container.style.left.length - 2
      );
      this.top = self.container.style.top.substring(
        0,
        self.container.style.top.length - 2
      );
      this.left = ev.clientX - this.left;
      this.top = ev.clientY - this.top;
      var img = new Image();
      img.src =
        "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cpath /%3E%3C/svg%3E";
      ev.dataTransfer.setDragImage(img, 0, 0);
    });
    this.container.addEventListener("drag", function (e) {
      self.container.style.transition = "all 0s";
      self.container.style.left = e.pageX - this.left + "px";
      self.container.style.top = e.pageY - this.top + "px";
    });
    this.container.addEventListener("dragend", function (e) {

      self.container.style.transform = "translate(0,0)";
      self.container.style.left = e.pageX - this.left + "px";
      self.container.style.top = e.pageY - this.top + "px";
      self.left = self.container.style.left;
      self.top = self.container.style.top;
    });
  }

  save(): void {
    this.ds.resetEmployeeInfo(this.idx, this.submit.depart, this.submit.role).subscribe((res: any) => {
      console.log(res);
      if (res.code == 100) {
        console.log('修改资料成功');
      }
    });
    // this.change=false;
  }

  back(): void {
    this.change = false;
  }
}
